<template>
  <div style="width: 240px;">
    <p>{{ weather.city }}{{ weather.temperature }}℃</p>
    <div style="width: 81px;float: left;">
      <i :class="weather.icon"></i>
    </div>
    <div style="float: right;margin: 30px 0;">
      <span>
        {{ weather.weather1 }}
        <span v-if="weather.weather2">/ {{ weather.weather2 }}</span>
      </span>
      <br>
      <span>
        {{ weather.description }}
        &nbsp;
        {{ weather.wind }}
      </span>
    </div>
  </div>
  
  
</template>
  
<script>
export default {
  data() {
    return {
      weather: {
        icon: 'qi-302',
        weather1:'',
        weather2:'',
        city: '',
        temperature: 0,
        description: '',
        wind: ''
      }
    };
  },
  created() {
    this.$axios
    .get("http://localhost:8888/file/weather")
    .then((response) => {
        // console.log(response.data);
        const data = response.data;
        const wt = this.weather;
        wt.city = data.place.split(",")[2]
        wt.weather1 = data.weather1
        wt.weather2 = data.weather2
        wt.temperature = data.temperature
        wt.description = data.windDirection
        wt.wind = data.windSpeed
        // console.log(wt.weather1.localeCompare("雷阵雨"));
        // 和风天气图标https://icons.qweather.com/icons/#sunny
        // 雷阵雨"qi-302" 晴"qi-100" 多云"qi-101" 阴"qi-104" 小雨"qi-305" 中雨"qi-306" 暴雨"qi-307"
        // 小雪"qi-400" 中雪"qi-401" 大雪"qi-402" 暴雪"qi-403" 雨夹雪"qi-404"
        // 雾霾"qi-500"
        if(wt.weather1.localeCompare("晴")==0) {
          wt.icon = "qi-100"
        }
        if(wt.weather1.localeCompare("阴")==0) {
          wt.icon = "qi-104"
        }
        if(wt.weather1.localeCompare("雷阵雨")==0) {
          wt.icon = "qi-302"
        }
        if(wt.weather1.localeCompare("小雨")==0) {
          wt.icon = "qi-305"
        }
        if(wt.weather1.localeCompare("中雨")==0) {
          wt.icon = "qi-306"
        }
        if(wt.weather1.localeCompare("大雨")==0) {
          wt.icon = "qi-307"
        }
        if(wt.weather1.localeCompare("暴雨")==0) {
          wt.icon = "qi-308"
        }

    })
  }
}
</script>

<style scoped>
h1 {
font-size: 28px;
margin-bottom: 20px;
}
i {
font-size: 88px;
}
span {
  font-size: 25px;
  font-family: "FZShuTi";
  font-weight:bold;
}
p {
  font-size: 36px;
  font-family: "FZShuTi";
  font-weight:bold;
  text-align: center;
  padding-left: 25px;
}
</style>